@import './btn.scss';
@import './element-ui.scss';
@import './mixin.scss';
@import './var.scss';

html, body {
  width: 100%;
  height: 100%;
}
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: $background;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.block {
  display: block;
}

code {
  background: #eef1f6;
  padding: 15px 10px;
  margin-bottom: 20px;
  display: block;
  line-height: 36px;
  a {
    color: #337ab7;
    cursor: pointer;
    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all .2s ease
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

//main-container全局样式
.app-container {
  padding: 20px;
}
.components-container {
  margin: 30px 50px;
  position: relative;
}
.pagination-container {
  padding: 20px 0;
}


.editor-container .CodeMirror {
  height: 100%!important;
}



.wscn-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
  .subtitle {
    font-size: 20px;
    color: #fff;
  }
  &.draft {
    background: #d0d0d0;
  }
  &.deleted {
    background: #d0d0d0;
  }
}

.publishedTag,
.draftTag,
.deletedTag {
  color: #fff;
  background-color: $panGreen;
  line-height: 1;
  text-align: center;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 4px;
  position: absolute;
  left: 20px;
  top: 10px;
}

.draftTag {
  background-color: $yellow;
}

.deletedTag {
  background-color: $red;
}

.input-label {
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 5px 11px 0;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.no-marginLeft {
  .el-checkbox {
    margin: 0 20px 15px 0;
  }
  .el-checkbox+.el-checkbox {
    margin-left: 0px;
  }
}

.filter-container {
  padding-bottom: 10px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}


//refine vue-multiselect plugin
.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}

//refine simplemde
.simplemde-container{
  .editor-toolbar.fullscreen,.CodeMirror-fullscreen{
    z-index: 1003;
  }
}

//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}

//github-corner
.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0)
  }
  20%,
  60% {
    transform: rotate(-25deg)
  }
  40%,
  80% {
    transform: rotate(10deg)
  }
}

@media (max-width:500px) {
  .github-corner:hover .octo-arm {
    animation: none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}

// button
.el-button--text {
  // color: #666;
}

.el-loading-mask{
    background-color: rgba(255, 255, 255, .3);
    z-index: 2000;//修改loding显示层次 by cuihd 20180403
}

.el-message{
  top:90px;
}

// link
.link-type {
  cursor: pointer;
  color: $content;
  &:hover {
    color: $primary;
  }
}

.link-src {
  color: $success;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}

// bread crumb
.el-breadcrumb {
  .el-breadcrumb__separator {
    color: $sub-content;
  }
  a {
    color: $primary;
  }
}

// menu
.el-menu {
  i {
    color: #ccc;
  }
  .el-submenu__title {
    color: #333;
    &:hover {
      background-color: #fff;
    }
  }
  .el-submenu.is-opened.is-active {
    i {
      color: #999;
    }
    // .el-submenu__title {
    //   color: $primary;
    //   background-color: #fff;
    // }
    &>.el-submenu__title {// 修复左侧导航高亮问题 注释掉了上面三行 增加此三行
      color: $primary;
      background-color: #fff;
    }
  }
}

.el-submenu {
  .el-menu {
    text-indent: 1.4em;
    background-color: #fff;
  }
  .el-menu-item {
    color: #666;
    &:hover {
      background-color: #ebebeb;
    }
    &.current {
      color: $primary;
    }
    &.is-active {
      color: $primary;
      .dot {
        background: transparent;
        width: 6px;
        height: 6px;
        border: 1px solid $primary;
      }
    }
    .dot {
      position: absolute;
      top: 50%;
      // left: 50px;
      margin-left: 10px; // dot修改 by cuihd
      transform: translate3d(-50%, -50%, 0);
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background: #ccc;
    }
  }
}

// 导航栏栏目悬浮颜色 cuihd 20180126
.el-menu-item:hover{
  background-color: #ebebeb;
}
// dilog的关闭按钮默认颜色 cuihd 20180126
.el-dialog__headerbtn .el-dialog__close{
  color: #ccc;
}
// dilog的title颜色 cuihd 20180126
.el-dialog__title{
  color: #333;
}

// table
.el-table--fit {
  .el-table__header-wrapper {
    thead {
      th {
        font-weight: normal;
        div {
          color: $desc;
        }
      }
    }
  }
}

// tab
.el-tabs__header {
  margin: 0;
  padding: 0 20px;
  background: #fff;
}

// 卡片管理
.titleTap{
  .el-tabs__header{
      margin-bottom: 40px;
      border-bottom: 1px solid #ebebeb;
      box-shadow:none;
      -webkit-box-shadow: none;
  }
}

// msgbox
.msgbox-fade-enter-active {
  animation: zoomIn .3s;
}

.msgbox-fade-leave-active {
  animation: zoomOut .3s;
}

// el-dialog
.dialog-fade-enter-active {
  animation: zoomIn .3s;
}

.dialog-fade-leave-active {
  animation: zoomOut .3s;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    100% {
        opacity: 0
    }
}

// 去掉 el-table__empty-block
.myArea .el-form-item{
  height: 36px;
}
// 面包屑颜色修改
.el-breadcrumb a {
  color: #666
}
// 表格悬浮样式修改 
.el-table--fit{
  .el-table__body-wrapper{
    .el-table__body {
      tbody{
        tr{
          &:hover {
            td{
              background-color:#f4f4f4;
            }         
          }
        }
      }     
    }
  }
}
// tab 头部底线修改 添加阴影
.el-tabs__header{
  border-bottom: 1px solid #ebebeb;
  box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
// tab 的内容不隐藏
.el-tabs__content{
  overflow:visible;
}
// tab 头部文字颜色修改
.el-tabs__item{
  color: #666;
}
//
.el-dropdown-menu{
  border: 0;
}
// 设置close icon的大小
.el-icon-close:before{
  font-size: 10px;
}
.el-autocomplete-suggestion li:active{
  background: none
}

.remote-center {
  .el-autocomplete-suggestion__list li {
      color:#999;
      text-align: center;
      cursor: default;
      &:hover{
      background-color: #fff;
      cursor: default;
      }
  }
}
.dynamicTagForm{//scy 仅在我自己页面中影响tag的样式,不影响全局
  .el-tag{
      display: inline-block;
      margin:10px;
      margin-left:0px;
      background-color: #ff5e2c;
      color:#fff;
      padding-right:20px;
      position: relative;
      height: 28px;
      line-height: 28px;
      .el-icon-close {
          position: absolute;
          top: 6px;
          right: 0px ;
      }
  }
  .el-button--default {
    min-width: 150px;
  }
  .el-form-item__content{
    margin-left:0px !important;
  }
}
